/*
 * @Date: 2022-05-21 17:27:59
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-05-21 17:57:51
 * @FilePath: \my-react-components\src\component\Transition\index.tsx
 * @Description: Transition
 */
import React, { memo } from "react";
import { CSSTransition } from "react-transition-group";
import { CSSTransitionProps } from "react-transition-group/CSSTransition";
type AnimationName =
  | "zoom-in-top"
  | "zoom-in-left"
  | "zoom-in-bottom"
  | "zoom-in-right";
interface TransitionProps extends CSSTransitionProps {
  animation?: AnimationName;
  wrapper?: boolean;
  children?: React.ReactNode;
}
const Transition: React.FC<TransitionProps> = memo(
  ({ children, classNames, animation, wrapper, ...restProps }) => {
    return (
      <CSSTransition
        classNames={classNames ? classNames : animation}
        {...restProps}
      >
        {wrapper ? <div>{children}</div> : children}
      </CSSTransition>
    );
  },
);
Transition.defaultProps = {
  appear: true,
  unmountOnExit: true,
};
export default Transition;
